<template>
  <view class="payments">
    <card-com title="支付方式">
      <view class="items">
        <radio-group @change="changeRadio">
			<label class="item" >
			  <view class="name">
			    <image class="icon" :src="payments[3].icon" :class="payments[3].name=='余额'?'balance':''" ></image>
			    <view class="text">
			      <view class="text-name">{{ payments[3].name }}</view>
			      <view class="balance" v-if="user && payments[3].value === 'balance'">{{ user.gold_coins }}</view>
			    </view>
			  </view>
			  <view class="radio">
			    <radio :value="payments[3].value" :checked="3 == currentIndex" style="transform:scale(0.7);" ></radio>
			  </view>
			</label>
          <label class="item">
            <view class="name">
              <image class="icon" :src="payments[0].icon" :class="payments[0].name=='支付宝'?'alipay-icon':''" ></image>
              <view class="text">
                <view class="text-name">{{ payments[0].name }}</view>
                <view class="balance" v-if="user && payments[0].value === 'balance'">{{ user.balance }}</view>
								<view class="balance" v-if="user && payments[0].value === 'shoppingmoney'">{{ user.spend }}</view>
              </view>
            </view>
            <view class="radio">
              <radio :value="payments[0].value" :checked="currentIndex==0" style="transform:scale(0.7);" ></radio>
            </view>
          </label>
					<!-- <label class="item" v-if="alipayShow" >
					  <view class="name">
					    <image class="icon" :src="payments[1].icon" :class="payments[1].name=='支付宝'?'alipay-icon':''" ></image>
					    <view class="text">
					      <view class="text-name">{{ payments[1].name }}</view>
					      <view class="balance" v-if="user && payments[1].value === 'balance'">{{ user.balance }}</view>
								<view class="balance" v-if="user && payments[1].value === 'shoppingmoney'">{{ user.spend }}</view>
					    </view>
					  </view>
					  <view class="radio">
					    <radio :value="payments[1].value" :checked="1 == currentIndex" style="transform:scale(0.7);" ></radio>
					  </view>
					</label> -->
					<!-- <label class="item" v-if="balanceShow" >
					  <view class="name">
					    <image class="icon" :src="payments[2].icon" :class="payments[2].name=='支付宝'?'alipay-icon':''" ></image>
					    <view class="text">
					      <view class="text-name">{{ payments[2].name }}</view>
					      <view class="balance" v-if="user && payments[2].value === 'balance'">{{ user.balance }}</view>
								<view class="balance" v-if="user && payments[2].value === 'shoppingmoney'">{{ user.spend }}</view>
					    </view>
					  </view>
					  <view class="radio">
					    <radio :value="payments[2].value" :checked="2 == currentIndex" style="transform:scale(0.7);" ></radio>
					  </view>
					</label> -->
					<!-- <label class="item" >
					  <view class="name">
					    <image class="icon" :src="payments[2].icon" :class="payments[2].name=='支付宝'?'alipay-icon':''" ></image>
					    <view class="text">
					      <view class="text-name">{{ payments[2].name }}</view>
					      <view class="balance" v-if="user && payments[2].value === 'balance'">{{ user.balance }}</view>
								<view class="balance" v-if="user && payments[2].value === 'shoppingmoney'">{{ user.spend }}</view>
					    </view>
					  </view>
					  <view class="radio">
					    <radio :value="payments[2].value" :checked="2 == currentIndex" style="transform:scale(0.7);" ></radio>
					  </view>
					</label> -->
					
        </radio-group>
      </view>
    </card-com>

  </view>
</template>

<script>
export default {
  name: "PaymentChooseCom",
  props: {
    user: {
      type: Object,
      default: null
    },
		balanceShow:{
			type: Boolean,
			default: true
		},
		shoppingmoneyShow:{
			type: Boolean,
			default: false
		},
		alipayShow:{
			default: true
		},
		weixinPayShow:{
			default: true
		},
		goldCoinsPayShow:{
			default: true
		},
		currentIndex:{
			default:3
		}
  },
  data() {
    return {
      payments: [
				{
					// icon: 'https://littleshop.oss-cn-beijing.aliyuncs.com/images/mini/order/payment-weixin.png',
					icon: '/static/images/common/payment-weixin.png',
					name: '微信',
					value: 'weixin',
					checked: true
				},
		  {
		  	icon: '/static/images/common/payment-alipay.png',
		  	name: '支付宝',
		  	value: 'alipay',
		  	checked: true
		  },
			// {
			// 	icon: '/static/images/common/balance.png',
			// 	name: '余额',
			// 	value: 'balance',
			// 	checked: false
			// },
			{
			  icon: '/static/images/common/shopingmoney.png',
			  name: '购物金',
			  value: 'shoppingmoney',
			  checked: false
			},
			{
			  icon: '/static/images/activity-account-icon.png',
			  name: '余额',
			  value: 'balance',
			  checked: false
			}
      ],
      current:3
    }
  },
  methods: {
    changeRadio(e) {
      for (let i = 0; i < this.payments.length; i++) {
        const payment = this.payments[i].value
        if (payment === e.detail.value) {
          this.current = i;
		  console.log(payment);
          this.$emit('paymentChosen', payment,i)
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.card{
	border:none !important;
}
.title{
	font-weight:400;
	
}
.payments {
  .items {
    .item {
      display: flex;
      justify-content: space-between;
      .name {
        display: flex;
        justify-content: flex-start;
        margin-top: 20rpx;
        .icon {
          width: 46rpx;
          height: 46rpx;
          margin-right: 20rpx;
        }
				.alipay-icon{
					width:38rpx;
					height:38rpx;
					margin-right: 20rpx;
				}
				.gold-coins-icon{
					width:38rpx;
					height:38rpx;
					margin-right: 20rpx;
				}
        .text {
          font-size: 24rpx;
          line-height: 24rpx;
          color: #333333;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .text-name {
            font-size: 24rpx;
            line-height: 24rpx;
            margin-right: 20rpx;
          }
          .balance {

          }
        }
      }
      .radio {
				display: flex;
				align-items: center;
				
      }
	 /deep/ .uni-checkbox-input-checked,
	 	.uni-radio-input-checked,
	 	.uni-switch-input-checked {
	 		background-color:#E97254 !important;
	 		border-color: #E97254 !important;
	 		color: #fff !important;
	     }
	  /deep/ uni-checkbox:not([disabled]) .uni-checkbox-input:hover {
	 	 border-color: #E97254;
	 }
    }
  }
}
</style>
